{% extends "base.html" %}
{% load i18n %}
{% load userprofile_tags %}
{% block title %}{{ profile.user }}'s public profile{% endblock %}
{% block customjs %}
{% if profile.latitude and profile.longitude %}
<script src="http://maps.google.com/maps?file=api&v=2&key={{ APIKEY }}" />
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
	$(function() {
  	if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
    	map.addControl(new GLargeMapControl());
    	map.addControl(new GOverviewMapControl())
    	map.addControl(new GMapTypeControl())
    	map.enableContinuousZoom();
    	map.setCenter(new GLatLng({{ profile.latitude }}, {{ profile.longitude }}), 4);
    	var marker = new GMarker(new GLatLng({{ profile.latitude }}, {{ profile.longitude }}), {clickable: false });
    	map.addOverlay(marker);
    }
	});
</script>
{% endif %}
{% endblock %}

{% block content %}
<h1>Public profile of {{ profile.user }}</h1>
<div class="vcard">
	<ul>
		<li><img src="{{ profile.user|avatar:"96" }}" /></li>
  	<li>{% trans "Username" %}: {{ profile.user }}</li>
		{% if profile.firstname %}<li>{% trans "Name" %}: {{ profile.firstname }} {{ profile.surname }}</li>{% endif %}
  	{% if profile.url %}<li>{% trans "Url" %}: <a href="{{ profile.url }}">{{ profile.url }}</a></li>{% endif %}
  	{% if profile.about %}<li>{% trans "About" %}: {{ profile.about }}</li>{% endif %}
		{% if profile.gender %}<li>{% trans "Gender" %}: <img src="{{ profile.get_genderimage_url }}" /></li>{% endif %}
		{% if profile.country %}<li>{% trans "Country" %}: {{ profile.country }}</li>{% endif %}
		{% if profile.location %}<li>{% trans "Location" %}: {{ profile.location }}</li>{% endif %}
		{% if profile.latitude and profile.longitude %}
		<li><div id="map"></div></li>
		{% endif %}
	</ul>
</div>
{% endblock %}

